<template>
  <a-card title="领取概况" :style="{ marginTop: '20px' }">
    <template slot="extra">
      <a-button size="small" type="danger" @click="$refs.table.refresh(true)">刷新</a-button>
    </template>
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.customer_id"
        :columns="totalColumns"
        :data="totalData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`筛选${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            筛选
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="type" slot-scope="text">
          <a-tag color="red">{{ typeOpts[text] }}</a-tag>
        </template>
        <template slot="tm_name" slot-scope="text,record">
          {{ text }}{{ record.pt_name }}
        </template>
        <template slot="customer_name" slot-scope="text, record">
          <div v-if="text === ''">{{record.apply}}</div>
          <div v-else>{{text}}</div>
        </template>
        <template slot="wechat" slot-scope="text, record">
          <a-button type="primary" icon="plus" size="small" v-if="text == ''" @click="addWechat(record.new_phone, record.customer_id)">添加微信</a-button>
          <a-button v-else type="link" icon="edit" size="small" @click="addWechat(record.new_phone, record.customer_id)">{{ text }}</a-button>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" :disabled="record.wechat == ''" @click="$router.push({ name: 'AddContract', query: {customer_id: record.customer_id} })">做合同</a-button>
          <a-button type="primary" size="small" @click="$router.push({ name: 'OtherDetail', params: {id: record.customer_id} })">详情</a-button>
          <!--          <a-rate :count="1" :default-value="0" @change="onChange" />-->
        </template>
      </s-table>
    </div>
    <a-modal
      title="添加微信信息"
      v-model="wechatVisible"
      @ok="onSubmit"
    >
      <a-alert type="error">
        <template slot="message">
          <p>1、如果已添加微信，客户未通过，请标注预加微信</p>
          <p>2、如果客户通过好友请求后，需及时更改预加为已加状态</p>
          <p>备注：否则影响统计</p>
        </template>
      </a-alert>
      <a-divider />
      <a-form-model
        ref="ruleForm"
        :model="wechatForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="客户电话" prop="phone">
          <a-row :gutter="20">
            <a-col :span="16">
              <a-input readOnly type="text" v-model="copySource" />
            </a-col>
            <a-col :span="6">
              <a-button type="primary" @click="copyPhone(copySource)">微信是否同号</a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="微信号码" prop="wechat">
          <a-input v-model="wechatForm.wechat" placeholder="请输入微信号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="添加类型">
          <a-radio-group :default-value="wechatForm.add_type" @change="onChange">
            <a-radio :value="10">
              预加V
            </a-radio>
            <a-radio :value="20">
              已加V
            </a-radio>
            <a-radio :value="5">
              无微信
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import customerColumns from '@/columns/customer'
import { getEditWechat, getOtherCustomer, postEditWechat } from '@/api/adviser'

export default {
  components: {
    STable
  },
  name: 'TotalCustomer',
  data () {
    return {
      totalColumns: customerColumns.other2,
      totalData: parameters => {
        return getOtherCustomer(parameters).then(res => {
          this.typeOpts = res.result.type_opts
          return res.result
        })
      },
      customerId: '',
      modalVisible: false,
      searchInput: null,
      searchText: '',
      wechatVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      wechatForm: {},
      copySource: '',
      typeOpts: {},
      wechatTypeOpts: {}
    }
  },
  methods: {
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.ruleForm.validate(valid => {
        if (valid) {
          data['customer[wechat]'] = app.wechatForm.wechat
          data['customer[type]'] = app.wechatForm.add_type
          postEditWechat(data, app.wechatForm.customer_id).then(res => {
            app.wechatVisible = false
            app.wechatForm = {}
            app.$refs.table.refresh(true)
          })
        } else {
          return false
        }
      })
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    addWechat (phone, id) {
      const app = this
      app.wechatForm = {}
      app.copySource = phone
      app.wechatForm['customer_id'] = id
      getEditWechat(id).then(res => {
        if (res.status === 0) {
          app.wechatVisible = true
          app.wechatTypeOpts = res.result.type
          app.wechatForm.wechat = res.result.customer.wechat
          app.wechatForm.add_type = res.result.customer.type
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    copyPhone (phone) {
      const app = this
      const id = app.wechatForm.customer_id
      this.wechatForm = {}
      this.wechatForm.wechat = phone
      this.wechatForm.customer_id = id
      // app.wechatForm.wechat = phone
    },
    onChange (e) {
      this.wechatForm.add_type = e.target.value
    }
  }
}
</script>

<style scoped>

</style>
